<template>
	<view @click="closeAllSwipe">
		<scroll-view style="height: 100vh;" scroll-y v-if="addressList.length">
			<uni-swipe-action ref='swipe'>
				<view class="list-item" v-for="(item,index) in addressList" :key="item.id">
					<uni-swipe-action-item :right-options="options" @click='deleteItem(item.id)'>
						<view class="layout">
							<view @click="changeAddress(item.id)" class="left">
								<view class="top">
									<view class="user-name">
										{{item.name}}
									</view>
									<view class="phone">
										{{item.phone.substr(0,3) + '****' + item.phone.substr(-4,4)}}
									</view>
									<view class="default" v-show="item.isDefault">
										默认
									</view>
								</view>
								<view class="bottom">
									{{item.fullAddress}}
								</view>
							</view>
							<view @click="toEdit(item.id)" class="right">
								<image src="../../../../../static/images/edit.png" mode="heightFix"></image>
							</view>
						</view>
					</uni-swipe-action-item>

				</view>
			</uni-swipe-action>
			<view class="" style="height: 150rpx;">

			</view>
		</scroll-view>

		<view v-else>
			<not-logged-in :obj='{text:"还没有新增地址，快去添加吧~",button:""}'></not-logged-in>
		</view>

		<view class="footer">
			<view class="btn">
				<navigator url="/modules/settingModule/pages/address/add/add">
					新增地址
				</navigator>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reqAddressList, reqDelAddress } from '@/api/address.js'
	import { toast } from '../../../../../utils/extendApi';

	let addressList = ref([]) // 地址列表
	let options = ref(
		[{
			text: '删除',
			style: {
				backgroundColor: '#dd524d'
			}
		}]
	) // 滑动单元格配置
	let swipe = ref() //swipe组件实例
	let flag = ref(0) // 接收结算支付页面传递过来的参数

	// 点击空白，关闭所有滑动单元格
	const closeAllSwipe = () => {
		swipe.value.closeAll()
	}

	// 滑动单元格的删除
	const deleteItem = async (id) => {
		let modelRes = await uni.showModal({
			title: "是否删除该地址"
		})

		if (modelRes.confirm) {
			let result = await reqDelAddress(id)
			getAddressList()
			toast({ title: '删除成功' })
		}
	}

	// 获取收货地址列表数据
	const getAddressList = async () => {
		let result = await reqAddressList()
		if (result.code == 200) {
			let { data } = result
			addressList.value = [...data]
		}
	}

	// 编辑收货地址
	const toEdit = (id) => {
		uni.navigateTo({
			url: `/modules/settingModule/pages/address/add/add?id=${id}`
		})
	}

	// 更新收货地址，将点击的收货地址传递结算支付页面
	const changeAddress = (id) => {

		if (flag.value == 1) {
			let selectAdress = addressList.value.find(item => item.id == id)
			getApp().globalData.address = selectAdress
			uni.navigateBack()
		}

	}

	onLoad((options) => {
		// 结算支付页面传递过来的参数
		flag.value = options.flag
	})

	onShow(async () => {
		getAddressList()
	})
</script>

<style lang="scss" scoped>
	.list-item {
		padding: 16rpx;
		margin: 16rpx 0;
		border-bottom: 1px solid rgba(207, 207, 207, 0.3);

		.layout {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.left {
				width: 90%;
				margin-right: 16rpx;

				.top {
					margin-bottom: 18rpx;
					color: #b4b4b4;
					display: flex;
					align-items: center;

					.user-name {}

					.phone {
						margin: 0 10rpx;
					}

					.default {
						margin-left: 10rpx;
						font-size: 20rpx;
						text-align: center;
						color: red;
						background-color: rgba(207, 0, 0, 0.1);
					}
				}

				.bottom {}
			}

			.right {
				width: 10%;

				image {
					height: 45rpx;
				}
			}
		}
	}

	.footer {
		border-top: 1px solid #f3514f;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 130rpx;

		.btn {
			width: 76%;
			line-height: 80rpx;
			font-weight: bold;
			font-size: 28rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #f3514f;
			color: #ffffff;
		}
	}
</style>